<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta  http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<meta name="author" content="Parallelus" />
	<meta name="description" content="A brief description of this website or your business." />
	<meta name="keywords" content="keywords, or phrases, associated, with each page, are best" />
	<title>Traject - Aim For The Next Level</title>
	
	<!-- Favorites icon -->
	<link rel="shortcut icon" href="http://para.llel.us/favicon.ico" />
	
	<!-- Style sheets -->
	<link rel="stylesheet" type="text/css" href="css/reset.min.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/menu.css" />
	<link rel="stylesheet" type="text/css" href="css/fancybox.css" />

	<!-- Skin Style Sheet -->
	<link rel="stylesheet" href="css/skins/skin-1.css" type="text/css" id="SkinCSS" />

	<!-- jQuery framework and utilities -->
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript"> $j = jQuery.noConflict(); </script>
	<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
	<script type="text/javascript" src="js/hoverIntent.min.js"></script>
	<!-- Drop down menus -->
	<script type="text/javascript" src="js/menu.js"></script>
	<!-- Font replacement (cufon) -->
	<script type="text/javascript" src="js/cufon-yui.js"></script>
	<script type="text/javascript" src="js/Vegur.font.js"></script>
	<script type="text/javascript" src="js/Vegur.Light.font.js"></script>
	<!-- Input labels -->
	<script type="text/javascript" src="js/jquery.overlabel.min.js"></script>
	<!-- Inline popups/modal windows -->
	<script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>

	

	<!-- IE only includes (PNG Fix and other things for sucky browsers -->
	
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="css/ie-6.css">
		<script type="text/javascript" src="js/pngFix.min.js"></script>
		<script type="text/javascript"> 
			$j(document).ready(function(){ 
				$j(document.body).supersleight();
			}); 
		</script> 
	<![endif]-->
	<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie-all-versions.css"><![endif]-->



	<!-- BEGIN: For Demo Only -->
		<!--			
		These entries are only needed for demo features, such as the real-time skin changer.
		They can be deleted for production installs without effecting the theme's design or 
		any of the funcionality.
		-->
		<script type="text/javascript" src="js/demo.js"></script>	
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<!-- END: For Demo Only -->



	<!-- Functions to initialize after page load -->
	<script type="text/javascript" src="js/onLoad.js"></script>


</head>
<body>

<div id="Wrapper">

	<div id="Top">
		<div id="TopContainer">
			
			<!-- Search -->
			<div id="SearchWrapper">
				<div id="Search">
					<form action="#" id="SearchForm" method="post">
						<p style="margin:0;"><input type="text" name="SearchInput" id="SearchInput" value="" /></p>
						<p style="margin:0;"><input type="submit" name="SearchSubmit" id="SearchSubmit" class="noStyle" value="" /></p>
					</form>
				</div>
			</div>
			
			<!-- Main Menu: MegaMenu -->
			<div id="MainMenu">
				<ul id="MegaMenu">
				
					<li class="current"><a href="index.html">Home</a></li>
					<li>
						<a href="#">Features</a>
						<div class="sub">
							<div class="row">
								<ul style="width: 200px;">
									<li><h2><a href="#">Home page</a></h2></li>
									<li><a href="index.html">Home 1 (default)</a></li>
									<li><a href="index-2.html">Home 2 (Products)</a></li>
									<li><a href="index-3.html">Home 3 (Nivo)</a></li>
									<li><br /><h2><a href="sample-layout.html">Theme Resources</a></h2></li>
									<li><a href="sample-text.html">Text Styles</a></li>
									<li><a href="sample-layout.html">Layout Overview</a></li>
								</ul>
								<ul style="width: 200px;">
									<li><h2><a href="#">Sample Pages</a></h2></li>
									<li><a href="sample-portfolio.html">Portfolio</a></li>
									<li><a href="sample-portfolio-2.html">Portfolio 2</a></li>
									<li><a href="sample-blog.html">Blog</a></li>
									<li><a href="sample-blog-page.html">Blog (single post)</a></li>
									<li><a href="sample-contact.html">Contact Form</a></li>
									<li><a href="sample-faq.html">FAQ's</a></li>
								</ul>
								<ul style="width: 200px;">
									<li><h2><a href="#">Mega Menus</a></h2></li>
									<li>
										<p>Add unlimited content, links, images and detailed information in your drop-down menus with Mega Menus.</p>
										<p>Usability testing shows mega drop-downs are more efficient and overcome the downsides of traditional menus.</p>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Skins</a>
						<div style="" class="sub">
							<div class="row">
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('1');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-1.jpg" width="130" alt="Skin 1" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('1');">Skin 1</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('2');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-2.jpg" width="135" alt="Skin 2" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('2');">Skin 2</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('3');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-3.jpg" width="135" alt="Skin 3" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('3');">Skin 3</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('4');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-4.jpg" width="135" alt="Skin 4" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('4');">Skin 4</a></h2></li>
								</ul>
							</div>
							<div class="row">
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('5');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-5.jpg" width="135" alt="Skin 5" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('5');">Skin 5</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('6');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-6.jpg" width="135" alt="Skin 6" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('6');">Skin 6</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('7');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-7.jpg" width="135" alt="Skin 7" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('7');">Skin 7</a></h2></li>
								</ul>
								<ul>
									<li style="text-align: center;"><a href="#" onclick="switchSkin('8');" style="background: none; padding: 0.75em 0;"><img class="skin" src="images/content/skin-changer/skin-8.jpg" width="135" alt="Skin 8" /></a></li>
									<li style="text-align: center;"><h2><a href="#" onclick="switchSkin('8');">Skin 8</a></h2></li>
								</ul>
							</div>
							<div class="row" style="text-align: center;">
								<ul style="width: auto; float:none; ">
									<li>
										<label for="WideFormatDesign">
											<input type="checkbox" id="WideFormatDesign" name="WideFormatDesign" /> Enable alternate wide format design? This will toggle the "page" style design on and off.
										</label>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li><a href="sample-faq.html">FAQ's</a></li>	
					<li><a href="sample-contact.html">Contact</a></li>	

				</ul>
			</div> <!-- END id="MainMenu" -->
			
			
			
			
		</div>
	</div> <!-- END id="Top" -->
	
	<a href="index.html" id="LogoHeader" class="logoMedium"></a>
	
	<div id="PageTop"></div>
	<div id="PageWrapper">
		
		<div id="PageOverlay">
			<div id="PageOverlayContent">
					
					<div class="contentArea">
						<h1 class="pageTitle">Portfolio 1</h1>
						<div class="pageIcon"><img src="images/icons/camera.png" width="128" height="128" alt="Portfolio" /></div>
					</div>

			</div> <!-- END id="PageOverlayContent" -->
		</div> <!-- END id="PageOveraly" -->


		<div id="Showcase">
			<div id="ShowcaseContent">
				<div class="contentArea">
					<h2 class="pageTagLine">A sample of the default portfolio layout.</h2>
				</div> <!-- END class="contentArea" -->
			</div> <!-- END id="ShowcaseContent" -->
		</div> <!-- END id="Showcase" -->


		<div id="MainPage">
			<div id="MainPageContent">
				<div class="contentArea">
					
					<div class="breadcrumbs">
						<a href="index.html">Home</a> &nbsp;\&nbsp; <a href="#">Some Page</a> &nbsp;\&nbsp; <a href="#">Some Page</a> &nbsp;\&nbsp; This Page
					</div>
					
					<!-- Page Content -->

					<!-- Gallery/Portfolio -->
					<div class="portfolioArea">
					
						<div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgMedium item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Nisi Vehicula Accumsan Luctus</h4>
								<p>Sed molestie, neque sed felis nisl mi sed odio. Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus a pretium.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						<div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgMedium item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Nisi Vehicula Accumsan Luctus</h4>
								<p>Sed molestie, neque sed felis nisl mi sed odio. Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus a pretium.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						<div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgMedium item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Nisi Vehicula Accumsan Luctus</h4>
								<p>Sed molestie, neque sed felis nisl mi sed odio. Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus a pretium.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						<div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgMedium item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Nisi Vehicula Accumsan Luctus</h4>
								<p>Sed molestie, neque sed felis nisl mi sed odio. Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus a pretium.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						<div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgMedium item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Nisi Vehicula Accumsan Luctus</h4>
								<p>Sed molestie, neque sed felis nisl mi sed odio. Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus a pretium.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						<div class="portfolioItem">
							<a href="images/content/demo-only/placeholder.jpg" class="zoom imgMedium item-preview iconZoom" title="This is the image description" rel="portfolio">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Image" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Nisi Vehicula Accumsan Luctus</h4>
								<p>Sed molestie, neque sed felis nisl mi sed odio. Aliquam mollis metus vel dolor amet nisi vehicula accumsan luctus a pretium.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						
						<!-- End of Content -->
						<div class="clear"></div>
					
					</div> <!-- end "portfolioArea" -->

					<h1 class="title">Videos</h1>
					<div class="hr"></div>
					
					<!-- Gallery/Portfolio -->
					<div class="portfolioArea">
					
						<div class="portfolioItem">
							<a href="http://www.youtube.com/watch?v=8iGRpC8U3x8&amp;autoplay=1" class="zoom imgMedium item-preview iconPlay" title="Play YouTube Clips">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Video" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>YouTube </h4>
								<p>Add links directly to YouTube vidos. Open in the video in a pop-up player by giving the links the "zoom" class.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						<div class="portfolioItem">
							<a href="http://www.vimeo.com/7123611" class="zoom imgMedium item-preview iconPlay" title="Play Videos from Vimeo">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Video" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Vimeo</h4>
								<p>Add links directly to Vimeo vidos. Open in the video in a pop-up player by giving the links the "zoom" class.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						<div class="portfolioItem">
							<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" class="zoom imgMedium item-preview iconPlay" title="Play Flash Videos">
								<img src="images/content/demo-only/placeholder.jpg" width="250" height="160" alt="Portfolio Video" />
								<span class="imgFrame"></span>
							</a>
							<div class="portfolioDescription">
								<h4>Flash</h4>
								<p>Play your SWF/Flash files. Add the same pop-up player to any page by adding the class "zoom" to your video link.</p>
								<a href="#" class="boxLink">More Information...</a>
							</div>
						</div>
						
						<!-- End of Content -->
						<div class="clear"></div>
					
					</div> <!-- end "portfolioArea" -->

					<!-- End of Content -->
					<div class="clear"></div>
				
				</div> <!-- END class="contentArea" -->
			</div> <!-- END id="MainPageContent" -->
		</div> <!-- END id="MainPage" -->
		
		
	</div> <!-- END id="PageWrapper" -->

	<div id="FooterWrapper">
		<div id="Footer">
			<div id="FooterContent">
				
				<div class="contentArea">
					
					<div class="copyright right">
						Copyright &copy; 2010 - <a href="http://para.llel.us">Parallelus</a> - All rights reserved. |  
						Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; 
						<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS</a>.
					</div>
					
					<ul id="FooterMenu" class="horizList left">
						<li><a href="index.html">Home</a></li>
						<li><a href="#">Features</a></li>
						<li><a href="sample-faq.html">FAQ's</a></li>
						<li><a href="sample-contact.html">Contact</a></li>
					</ul>
					
					<div class="clear"></div>
					
				</div> <!-- END class="contentArea" -->
				
			</div> <!-- END id="FooterContent" -->
		</div> <!-- END id="Footer" -->
	</div> <!-- END id="FooterWrapper" -->
	
</div> <!-- END id="Wrapper" -->

<!-- Activate Font Replacement (cufon) -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>